<template>
	<view class="detail">
		<u-navbar @leftClick="back" bgColor="#F6F9FF"
			leftIconColor="#000000" :title="detail.title">
			<!-- <view class="" slot="right" @click="toShare">
				<u-icon name="@/static/ico/share_n.png" size="32rpx"></u-icon>
			</view> -->
		</u-navbar>
		<!-- <image src="@/static/images/timg2.png" mode="aspectFit" class="dg"></image>
		<image src="@/static/images/xbg.png" mode="aspectFit" class="dgs"></image> -->
		<view class="goods" >
			<!-- #ifdef MP-WEIXIN -->
			<!-- <Model :thumb="detail.thumb"></Model> -->
			<!-- #endif -->
			<!-- #ifdef H5||APP -->
			<!-- <H5Model :type="detail.special_type_id==2?2:1"
				:model="detail.special_type_id==2?detail.resources_address:$api.glb" :thumb="detail.thumb"></H5Model> -->
			<!-- #endif -->
			<!-- <image :src="detail.thumb" mode="" ></image> -->
			<video v-if="detail.special_type_name=='视频'"  :src="detail.resources_address"  loop="loop"  :controls="false" autoplay="autoplay" muted="muted"></video>
			<fr-image v-else @click="preview(detail.thumb)" class="img" mode="heightFix" :flexdStatus="true" loading-ing-img="two-balls" loadingHeight='840rpx' :src="detail.thumb"  :complete-transition="true"/>
		</view>
		<view class="content">
			<view class="content-header">
				<view class="content-header-cont">
					<view class="content-header-cont-header">
						<view class="title">
							<view class="one">
								<text>{{detail.title}}</text>
							</view>
							<view class="bq">
								<view class="avatar">
									<image :src="detail.portrait" mode=""></image>
								</view>
								<view class="author">{{ detail.user_name||'' }}</view>
							</view>
						</view>
						<view class="info">
							<!-- <view class="bq">所属专辑：<text>{{detail.title}}</text></view> -->
							
							<view class="">
								<view class="count">
									<text class="text">发行</text>
									<text class="text-c">{{ detail.all_count }}份</text>
								</view>
								<view class="count">
									<text class="text">流通</text>
									<text class="text-c">{{ detail.sale_count }}份</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="chainInfo" v-if="false">
				<view class="title">
					链上信息
				</view>
				<!-- <view class="line">
					<view class="left">
						<view class="bq">所属专辑</view> <text>{{detail.title}}</text>
					</view>
				</view> -->
				<!-- <view class="line">
					<view class="left">
						<view class="bq">编 号</view> <text>#{{detail.code}}/{{detail.all_count}}</text>
					</view>
					<view class="right" @click="tosall">
						<view>查看其它编号</view>
						<image class="ico" src="../../static/ico/lrs.png" mode="aspectFit"></image>
					</view>
				</view> -->
				<view class="line">
					<view class="left">
						<view class="bq">合约地址</view> <text>{{detail.contract_address|yingcang}}</text>
					</view>
					<view class="right">
						<view class="bq" @click="toUrls(detail.bsn_url)">查看合约</view>
						<image class="ico" src="@/static/ico/lrs.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="line">
					<view class="left">
						<view class="bq">链上标识</view> <text>{{detail.chain_mark}}</text>
					</view>

				</view>
				<view class="line">
					<view class="left">
						<view class="bq">发布时间</view> <text>{{detail.create_time}}</text>
					</view>
				</view>

			</view>

			<view class="work" v-if="false">
				<view class="tops">
					<view class="work-title">创作者介绍</view>
					<view class="btn" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
						TA的主页
						<image class="ico" src="@/static/ico/lrs.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="author">
					<u-avatar size="42" :src="detail.portrait"></u-avatar>
					<view class="user">
						<view class="des">创作者</view>
						<view class="name">{{detail.user_name||''}}
							<image src="@/static/images/share/fz.png" mode="aspectFit" @click="toCopy(detail.user_name)"
								class="fzico"></image>
						</view>
					</view>
				</view>
				<view class="work_detail">
					<view class="work_title">
						<u-parse :content="detail.detail"></u-parse>
					</view>
				</view>
			</view>

			<!-- 交易记录 -->
			<Trading :id="id" v-if="false" />

			<DrawLots :goods="detail" v-if="false"></DrawLots>


			<view class="describe" v-if="false">
				<view class="describe-title">作品描述</view>
				<view class="describe-content">
					<u-parse :content="detail.story "></u-parse>
				</view>
			</view>
			<view class="notice" v-if="false">
				<view class="notice_title">购买须知</view>
				<view class="des" v-html="purchase.value"></view>
			</view>
			<!-- <view class="support">疯传数藏 提供技术支持</view> -->
			<view class="btoomm" v-if="false">
				<view class="jszc">
					<image src="@/static/images/dylogo.png" mode="aspectFit"></image>
					提供技术支持
				</view>
				<view class="bah">
					<!-- 鄂ICP备2022006927号 -->
				</view>
			</view>
		</view>
		<view class="buy savepadding savebottom">
			<view class="price">
				<text>最低售价:</text>
				<text class="price">¥{{detail.price||0}}</text>
			</view>
			<!-- detail.num<=0 || --> <!--:class="{error:detail.num<=0}" -->
			<u-button shape="circle" :plain="true" type="primary" :loading="loading" :class="{error:num<=0}"  :disabled="goods_status === 2 || num<=0"
				@click="toPage('/pages/shop/payment',{id:goodsId,type:detail.type})">

				<block v-if="num<=0">
					<text>已售</text>
				</block>
				<block v-else-if="goods_status === 2">
					<text>商品交易中</text>
				</block>
				<view v-else class="pay">
					<text>立即购买</text>
					<text style="font-size: 25px;"> → </text>
					<!-- 暂未开放 -->
				</view>
			</u-button>
		</view>
		<!-- <view class="loading" v-if="is_loading">
			<u-loading-icon color="#FFFFFF" textColor="#FFFFFF" text="努力加载中"></u-loading-icon>
		</view> -->
		<!-- <u-loading-page bgColor="#030303" :loading="true" loading-text="loading..."></u-loading-page> -->
		<view class="tabs">
			<u-tabs lineWidth="40" activeStyle="color: #292A40;font-size: 28rpx;font-weight: 800;" inactiveStyle="color: #8C93AA;font-size: 28rpx" :list="tabList" @change="changeTab"></u-tabs>
		</view>
		<view class="tabBox">
			<view class="container" v-if="current === 0">
				<view class="have">
					<view class="stop">
						<view class="l" @click="toSell(sell)">
							<view :class="sell?'no':'yes'"></view> 仅看在售商品
						</view>
						<view class="r">
							<view :class="type==1?'act':''" @click="toType(1)">
								按编号排序
							</view>
							<view :class="type==2?'act':''" @click="toType(2)">
								按价格排序
							</view>
						</view>
					</view>
					<template v-if="list.length > 0">
						<view class="item" :class="goodsId===item.goods_id ? 'active':''" v-for="item in list" :key="item.goods_id" @click="goodsId=item.goods_id;goods_status=item.status;num=item.num">
							<view class="top">
								<view class="item-info">
									<text class="info-number">#{{item.code}}/{{item.all_count}}</text>
									<text class="status onSale" v-if="item.num>0">在售</text>
									<text class="status" v-else-if="item.status===2">交易中</text>
									<text class="status" v-else>已售</text>
								</view>
								<view class="item-price">{{ item.price }}</view>
							</view>
							<view class="footer">
								<view class="iden">
									链上标识{{item.chain_mark}}
								</view>
								<view class="tips">售价</view>
							</view>
						</view>
					</template>
					<Empty v-else text="暂无藏品"></Empty>
					
				</view>
			</view>
			<view class="container" v-if="current === 1">
				<view class="chainInfo">
					<view class="title">
						专辑信息
					</view>
					<view class="line">
						<view class="bq">专辑名称</view> 
						<view class="left">{{detail.title}}</view>
					</view>
					<view class="line">
						<view class="bq">合约地址</view>
						<view class="left">{{detail.contract_address|yingcang}}<u-icon name="play-right-fill" color="#8C93AA" size="10" @click="toUrls(detail.bsn_url)"></u-icon></view>
					<!-- <view class="right">
						<view class="bq" @click="toUrls(detail.bsn_url)"></view>
					</view> -->
					</view>
					<view class="line">
						<view class="bq">链上标识</view>
						<view class="left">{{detail.chain_mark}}</view>
					</view>
					<view class="line">
						<view class="bq">发布时间</view>
						<view class="left">{{detail.create_time}}</view>
					</view>
				</view>
				<view class="author">
					<view class="user">
						<u-avatar size="42" :src="detail.portrait"></u-avatar>
						<view class="one">
							<view class="name">
								<text class="authorName">{{detail.user_name||''}}</text>
								<text class="des">创作者</text>
							</view>
							<view class="address">{{detail.address}}</view>
						</view>
					</view>
					<!-- <view class="hisHome" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
						<text>他的主页</text>
						<u-icon name="play-right-fill" color="#8C93AA" size="10"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="container" v-if="current === 2">
				<Trading :id="id" />
			</view>
			<view class="container" v-if="current === 3">
				<view class="introduce">
					<view class="describe">
						<view class="describe-title">作品解读</view>
						<view class="describe-content">
							<u-parse :content="detail.story "></u-parse>
						</view>
					</view>
					<view class="authorInfo">
						<view class="authorInfo-title">创作者介绍</view>
						<view class="authorInfo-content">
							<view class="Info">
								<u-avatar size="32" :src="detail.portrait"></u-avatar>
								<view class="info">
									<view class="name">{{ detail.user_name||'' }}</view>
									<view class="address">{{detail.address}}</view>
								</view>
							</view>
							<!-- <view class="toHome" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
								<text>他的主页</text>
								<u-icon name="play-right-fill" color="#8C93AA" size="10"></u-icon>
							</view> -->
						</view>
						<view class="parse">
							<u-parse :content="detail.company_int"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<u-popup :show="Allshow" mode="bottom" round="16" bgColor="#1E2020" @close="close" @open="open">
			<view class="morelist">
				<view class="title">
					商品列表
				</view>
				<view class="stop">
					<view class="l" @click="toSell(sell)">
						<view :class="sell?'no':'yes'"></view> 仅看在售商品
					</view>
					<view class="r">
						<view :class="type==1?'act':''" @click="toType(1)">
							按编号排序
						</view>
						<view :class="type==2?'act':''" @click="toType(2)">
							按价格排序
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list" @scrolltolower="Drawlist()">
					<view class="item" v-for="(item,index) in list" :key='index' @click="toget(item.goods_id)">
						<view class="left">
							<view class="">
								<text class="tt1">
									#{{item.code}}/{{item.all_count}}
								</text>
								<text class="zs" v-if="item.num>0">在售</text>
								<text class="nzs" v-else>已售</text>
							</view>
							<view class="tt2">
								链上标识:{{item.chain_mark}}
							</view>
						</view>
						<view class="right">
							<view class="tt1">
								¥{{item.price}}
							</view>
							<view class="tt2">
								售价
							</view>
							<image src="/static/ico/lr.png" mode="aspectFit" class="lr"></image>
						</view>
					</view>
			 </scroll-view>
				<view class="more" v-if="total>0" @tab="Drawlist">{{total>list.length?'加载更多':'已加载全部'}}</view>
				<Empty v-if="list.length==0" text="暂无藏品"></Empty>
			</view>
		</u-popup>

		<ShareCard :goods="detail" :domId="aaa" :share="show" v-if="show" @close="close" />
		<canvas canvas-id="myCanvas"
			style="width:1000px;height:1000px;position: fixed;left: 0;top: -999999px;"></canvas>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Model from '@/subpage/components/3D.vue'
	import H5Model from '@/subpage/components/H53D.vue'
	import DrawLots from '@/components/DrawLots.vue'
	import Empty from '@/components/Empty.vue'
	import Trading from '@/components/trading.vue'
	var isBuy = null
	var isBuy_t = null
	import ShareCard from '@/components/wakary-poster.vue'
	import frImage from '@/components/fr-image/fr-image.vue'
	export default {
		mixins: [mixin],
		components: {
			Model,
			H5Model,
			DrawLots,
			ShareCard,
			Empty,
			Trading,
			'fr-image':frImage
		},
		data() {
			return {
				aaa: '',
				id: "",
				width: 0,
				detail: {},
				purchase: {},
				loading: false,
				isBuy: false,
				is_loading: true,
				show: false,
				Allshow: false,
				page: 1,
				type: 1,
				sell: true,
				list: [],
				total: 0,
				purchaselist: [],
				scrollTop: 0,
				goods_status: 0,
				num: 0,
				specialId: '',
				goodsId: '',
				current: 0,
				tabList: [
					{name:'全部商品'},
					{name:'链上信息'},
					{name:'交易信息'},
					{name:'作品介绍'}
				],
			}
		},
		onReady() {

		},
		onShow() {
			if (this.current === 0) {
				this.list = []
				this.tosall()
			}
		},
		onLoad(e) {
			this.is_loading = true
			this.id = this.goodsId = e.id
			this.specialId = e.specialId
			// #ifdef MP-WEIXIN
			this.width = uni.getMenuButtonBoundingClientRect().width
			// #endif
			this.collectionInfo(e.id)
			this.getPurchase()
			// this.goodsLog()
		},
		onReachBottom() {
			if (this.current === 0) {
				if (this.total > this.list.length) {
					this.page += 1
					this.tosall()
				}
			}
		},
		onPullDownRefresh() {
			if (this.current === 0) {
				this.list = []
				this.page = 1
				this.tosall()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {

		},

		destroyed() {
			console.log('[-------------------------------------------页面卸载--------------------------------------]')
			clearInterval(isBuy)
			clearInterval(isBuy_t)
		},

		methods: {
			// 图片预览
			preview (url) {
				uni.previewImage({
					urls: [url],
					longPressActions: true,
					indicator: 'none'
				})
			},
			changeTab (e) {
				this.current = e.index
			},
			Drawlist() {
				console.log(this.total, this.list.length);
				if (this.total > this.list.length) {
					this.page += 1
					this.tosall()
				}
			},
			toSell(e) {
				this.sell = !e
				this.page = 1
				this.tosall()
			},
			toType(e) {
				this.type = e
				this.page = 1
				this.tosall()
			},
			toget(e) {
				this.id = e
				this.Allshow = false
				this.collectionInfo(e)
			},
			async tosall() {
				let data = await this.$http({
					url: this.$api.specialGoodsList,
					method: 'POST',
					hideLoading: true,
					data: {
						page: this.page,
						page_size: 10,
						special_id: this.specialId,
						type: this.type,
						sell_status: this.sell ? '1' : '2'
					}
				})
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = []
					}
					this.total = data.data.total
					this.list = this.list.concat(data.data.data)
					// this.Allshow = true
				}

			},

			async goodsLog() {
				let data = await this.$http({
					url: this.$api.goodsLog,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.id,
						page: 1,
						page_size: 5
					}
				})
				console.log('[流转信息]', JSON.stringify(data))
				if (data.code == 200) {
					this.purchaselist = data.data.data;
				}
			},
			toUrls(url) {
				if (url) {
					//#ifdef H5
					window.open(url)
					//#endif
					// #ifdef APP
					plus.runtime.openURL(url)
					// #endif
				} else {
					this.$u.toast('暂无合约信息')
				}
			},
			toCopy(val) {
				uni.setClipboardData({
					data: val,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.Allshow = false
				// console.log('close');
			},
			toShare() {
				this.show = true
				this.aaa = '111'
			},
			//整体藏品详情
			async collectionInfo(id) {
				try{
					let data = await this.$http({
						url: this.$api.goodsInfo,
						method: 'POST',
						hideLoading: true,
						data: {
							id: id
						}
					})
					// this.goods_status = data.data.info.goods_status
					if (data.code == 200) {
						// data.data?.rule?data.data.rule=JSON.parse(data.data.rule):''
					
						// this.detail = data.data.info	
						this.detail = Object.assign({}, data.data.info)
						// this.detail.thumb = ''
						console.log(data.data.info.thumb);
					// 	uni.getImageInfo({
					// 		src: data.data.info.thumb,
					// 		success: (res) => {
					// 			let imgInfo = {
					// 				width: res.width,
					// 				height: res.height,
					// 				path: data.data.info.thumb
					// 			}
					// 			console.log();
					// 			this.recursion(imgInfo, (base) => {
					// 				this.$set(this.detail, 'thumb', base)
					// 			})
					
					// 		}
					// 	});
						this.isBuy = true
						this.is_loading = false
					
					}
				}catch(e){
					//TODO handle the exception
					this.is_loading = false
				} finally {
					this.is_loading = false
				}
			},
			//购买须知
			async getPurchase() {
				let data = await this.getConfigDetail('purchase_instructions')
				if (data.code == 200) {
					this.purchase = data.data
				}
				console.log('[purchase]', this.purchase)
			},

		},
		filters: {
			status(e) {
				switch (e) {
					case 1:
						return '买入'
						break;
					case 8:
						return '挂售'
						break;
					default:
						return ''
						break;
				}
			},
			FormatTime(e) {
				if (e) {
					return e.substring(5)
				}

			},
			yingcang(val) {
				if (val) {
					let a = val.replace(/(\w{8})\w+(\w{8})/, "$1...$2");
					return a;
				} else {
					return "...";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img{
		width: 100vw;
		position: none !important;
		// height: 200px;
	}
	.detail {
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #f5f5f5;
		position: relative;

		::v-deep.u-navbar--fixed {
			z-index: 999;
		}
		.dg {
			position: absolute;
			top: -40rpx;
			width: 750rpx;
			height: 444rpx;
			z-index: 0;
		}

		.dgs {
			position: absolute;
			top: 242rpx;
			width: 750rpx;
			height: 912rpx;
			z-index: 0;
		}

		.goods{
			width: 750rpx;
			height: 750rpx;
			/* #ifdef H5 */
			padding-top: 100rpx;
			/* #endif */
			/* #ifdef APP-PLUS || APP */
			padding-top: 200rpx;
			/* #endif */
			text-align: center;
			background: #F6F9FF;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.tabs {
			display: flex;
			justify-content: space-evenly;
			background: #fff;
			border-bottom: 1rpx solid #E0E6F0;
			margin-top: 20rpx;
		}
		.tabBox {
			background: #fff;
			padding-bottom: 120rpx;
			.container {
				margin: 0 30rpx;
				padding: 30rpx 0;
				.have {
					.stop {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;
						background: #F2F5FA;
						padding: 14rpx 10rpx;
					
						.l {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #A0A0A0;
							line-height: 34rpx;
					
							.no {
								width: 32rpx;
								height: 32rpx;
								border-radius: 4rpx;
								border: 2rpx solid #DDDDDD;
								margin-right: 10rpx;
							}
					
							.yes {
								position: relative;
								width: 32rpx;
								height: 32rpx;
								border-radius: 4rpx;
								background: #468EFF;
								border: 2rpx solid #468EFF;
								margin-right: 10rpx;
								&::after {
									content: '√';
									width: 30rpx;
									height: 30rpx;
									position: absolute;
									text-align: center;
									font-size: 28rpx;
									font-weight: 600;
									color: #fff;
									top: 0;
									left: 0;
									bottom: 0;
									right: 0;
									margin: auto;
								}
							}
						}
					
						.r {
							display: flex;
							justify-content: space-between;
							min-width: 338rpx;
							height: 60rpx;
							background: #F7F7FA;
							border-radius: 8rpx;
							font-size: 24rpx;
							// font-weight: 600;
							line-height: 34rpx;
							color: #C1C1C1;
							text-align: center;
							line-height: 60rpx;
							border: 2rpx solid #FFFFFF;
					
							view {
								width: 164rpx;
							}
					
							.act {
								width: 164rpx;
								color: #333333;
								height: 60rpx;
								background: #fff;
								border-radius: 8rpx;
							}
						}
					}
					
					.item {
						// width: 690rpx;
						// height: 120rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						border: 1rpx solid #E0E6F0;
						padding: 20rpx;
						box-sizing: border-box;
						.top {
							display: flex;
							justify-content: space-between;
							.item-info {
								.info-number {
									font-size: 28rpx;
									font-weight: 600;
									color: #16172F;
								}
								.status {
									width: 96rpx;
									height: 34rpx;
									font-size: 24rpx;
									background: #E3EAF5;
									color: #8C93AA;
									border-radius: 1rpx 20rpx 1rpx 20rpx;
									padding: 0 12rpx;
									margin-left: 10rpx;
								}
								.onSale {
									background: #468EFF;
									color: #fff;
								}
							}
							.item-price {
								font-size: 36rpx;
								font-weight: bold;
								color: #16172F;
							}
							
						}
						.footer {
							display: flex;
							justify-content: space-between;
							.iden {
								width: 211rpx;
								font-size: 24rpx;
								color: #8C93AA;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.tips {
								font-size: 24rpx;
								color: #8C93AA;
							}
						}
						&:not(:first-child) {
							margin-top: 20rpx;
						}
					}
					.active {
						background: #16172F;
						.info-number {
							color: #fff !important;
						}
						.status {
							background: rgba(255,255,255,0.4) !important;
							color: #fff !important;
						}
						.onSale {
							background: #468EFF !important;
							color: #fff;
						}
						.item-price {
							color: #fff !important;
						}
					}
				}
				.chainInfo{
					background: #ffffff;
					border-radius: 8rpx;
					padding: 38rpx 0;
					border-bottom: 1rpx solid #E0E6F0;
					.title{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin-bottom: 32rpx;
					}
					.line{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 20rpx 0;
						.bq{
							font-size: 24rpx;
							color: #8C93AA;
							margin-right: 30rpx;
							text-align-last: justify;
							width: 100rpx;
							white-space: nowrap;
						}
						.left{
							font-size: 24rpx;
							font-weight: 600;
							color: #333333;
							line-height: 34rpx;
							display: flex;
						}
					}
					.ico{width: 24rpx;height: 24rpx; margin-left: 10rpx;}
					
					.right{
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						display: flex;
						align-items: center;
					}
				}
				.author{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom:18rpx;
					margin-top: 18rpx;
					.user{
						display: flex;
						margin-left: 16rpx;
						.one {
							margin-left: 10rpx;
							margin-top: 8rpx;
						}
						.name{
							display: flex;
							font-size: 28rpx;
							font-weight: 600;
							color: #000;
							line-height: 40rpx;
							.authorName {
								// width: 200rpx;
								flex: 1;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							.des {
								flex: 1;
								position: relative;
								display: inline-block;
								font-size: 24rpx;
								color: #FF8146;
								font-weight: 400;
								margin-left: 20rpx;
								&::after {
									content: '';
									position: absolute;
									width: 8rpx;
									height: 8rpx;
									border-top: 1rpx solid #FF8146;
									border-right: 1rpx solid #FF8146;
								}
								&::before {
									content: '';
									position: absolute;
									left: -8rpx;
									bottom: 8rpx;
									width: 8rpx;
									height: 10rpx;
									border-bottom: 1rpx solid #FF8146;
									border-left: 1rpx solid #FF8146;
								}
							}
						}
						.address {
							width: 300rpx;
							color: #8C93AA;
							font-size: 24rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
					.hisHome {
						display: flex;
						font-size: 24rpx;
						color: #8C93AA;
					}
				}
				.introduce {
					.describe{
						background: #FFF;
						border-radius: 8rpx;
						&-title{
							font-size: 32rpx;
							font-weight: 600;
							color: #16172F;
							line-height: 40rpx;
						}
						&-content{
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #8C93AA;
						}
					}
					.authorInfo {
						margin-top: 40rpx;
						&-title{
							font-size: 32rpx;
							font-weight: 600;
							color: #16172F;
							line-height: 40rpx;
						}
						&-content {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.Info {
								display: flex;
								align-items: center;
								margin-top: 28rpx;
								.info {
									margin-left: 20rpx;
									.name {
										font-size: 28rpx;
										color: #16172F;
										font-weight: 600;
									}
									.address {
										font-size: 24rpx;
										color: #8C93AA;
										width: 300rpx;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
									}
								}
							}
							.toHome {
								display: flex;
								font-size: 24rpx;
								color: #8c93aa;
							}
						}
						.parse {
							font-size: 24rpx;
							color: #8C93AA;
							margin-top: 24rpx;
						}
					}
				}
			}
		}

		.content {
			background: #F6F9FF;
			&-header {
				// padding: 132rpx 76rpx 22rpx 78rpx;
				box-sizing: border-box;
				// min-height: 302rpx;
				// background: #FFFFFF url(@/static/images/tray.png)center center no-repeat;
				background-size: 100% 100%;
				// overflow: hidden;

				&-cont {
					display: flex;
					justify-content: center;
					align-items: center;
					&-header {
						width: 100%;
						display: flex;
						justify-content: space-between;
						background: #FFFFFF;
						border-radius: 8rpx;
						padding: 30rpx;
						box-sizing: border-box;
						z-index: 888;
						.title {
							justify-content: space-between;
							align-items: center;
							font-size: 36rpx;
							font-weight: 600;
							color: #292A40;
							.tag{
								display: inline-block;
								// margin-left: 12rpx;
								// margin-top: 10rpx;
								text{
									display: inline-block;
									padding: 2rpx 12rpx;
									background: #b6b6b6;
									border-radius: 4rpx;
									font-size: 24rpx;
									font-weight: 600;
									color: #FFF;
									line-height: 34rpx;
									&.number{
										margin-left: 0;
										background: #000;
										border-radius: 4rpx 0px 0px 4rpx;
										color: #FFF;
									}
								}
							}
							.bq {
								display: flex;
								font-size: 24rpx;
								color: #8C93AA;
								margin-top: 12rpx;
								.avatar {
									width: 32rpx;
									height: 32rpx;
									image {
										width: 100%;
										height: 100%;
										border-radius: 50%;
									}
								}
								.author {
									margin-left: 10rpx;
								}
							}
						}
						.info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.count {
								display: flex;
								height: 50rpx;
								background: #fff;
								border-radius: 4rpx;
								border: 1rpx solid #F2F5FA;
								padding: 4rpx;
								box-sizing: border-box;
								&:nth-child(2) {
									margin-top: 12rpx;
								}
								.text {
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									background: #F2F5FA;
									border-radius: 2rpx;
									opacity: 0.4;
									color: #8C93AA;
									padding: 8rpx;
									box-sizing: border-box;
								}
								.text-c {
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 32rpx;
									color: #8C93AA;
									margin-left: 8rpx;
									// font-weight: bold;
								}
							}
						}
						// display: flex;
						// justify-content: space-between;
						// align-items: center;
						// padding: 0 78rpx;
						// box-sizing: border-box;
						// white-space: nowrap;

						// image {
						// 	width: 60rpx;
						// 	height: 104rpx;
						// }

						&-top {
							.title {
								text-align: center;

								text {
									font-size: 32rpx;
									font-weight: 600;
									color: #000;
									line-height: 44rpx;

								}
							}

						}
					}

					.tips {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #9EA1AF;
						display: flex;
						align-items: center;
						justify-content: center;

						&-y {
							display: inline-block;
							width: 6rpx;
							height: 8rpx;
							border-radius: 3rpx;
							border: 2rpx solid #DED1C3;
						}

						&-cont {
							margin: 0 8rpx;
							position: relative;

							&::after {
								content: '';
								width: 118rpx;
								height: 2rpx;
								background: linear-gradient(90deg, #E1D3C5 0%, rgba(242, 235, 228, 0) 100%);
								position: absolute;
								right: -134rpx;
								top: 50%
							}

							&::before {
								content: '';
								width: 118rpx;
								height: 2rpx;
								background: linear-gradient(90deg, rgba(242, 235, 228, 0) 0%, #E1D3C5 100%);
								position: absolute;
								left: -134rpx;
								top: 50%
							}
						}
					}

				}

			}

			.tags {
				width: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;

				.tag {
					display: inline-block;
					margin-left: 12rpx;
					margin-top: 10rpx;

					text {
						display: inline-block;
						padding: 2rpx 12rpx;
						background: #b6b6b6;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #FFF;
						line-height: 34rpx;

						&.number {
							margin-left: 0;
							background: #000;
							border-radius: 4rpx 0px 0px 4rpx;
							color: #FFF;
						}
					}

				}

			}

			.work {
				background: #FFF;
				padding: 22rpx 28rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				.tops {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						font-size: 24rpx;
						font-weight: 400;
						color: #C1C1C1;
						padding: 4rpx 14rpx;
						border-radius: 100rpx;
						display: flex;
						align-items: center;
					}

					.ico {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}

				&-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 40rpx;
				}

				.author {
					display: flex;
					align-items: center;
					padding-bottom: 18rpx;
					margin-top: 18rpx;
					

					.user {
						margin-left: 16rpx;

						.des {
							font-size: 24rpx;
						}

						.name,
						.des {
							font-size: 28rpx;
							// font-weight: 600;
							color: #000;
							// line-height: 40rpx;
						}

						.name {
							display: flex;
							align-items: center;

							.fzico {
								height: 32rpx;
								width: 32rpx;
								margin-left: 10rpx;
							}
						}

					}
				}

				.work_detail {
					.work_title {
						font-size: 24rpx;
						// font-weight: 600;
						color: #999999;
						line-height: 34rpx;

						::v-deep image {
							max-width: 100% !important;
						}
					}
				}

				.item {
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;
					border-bottom: 1px solid #f5f5f5;
					padding: 26rpx 0;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: flex-end;
					}

					.title {
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin: 5rpx 0;
					}

					.num {
						margin: 5rpx 0;
						font-size: 22rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #999999;
						line-height: 32rpx;
					}
				}
			}

			.chainInfo {
				margin: 30rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				// margin: 0 0rpx 18rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					line-height: 40rpx;
					margin-bottom: 32rpx;
				}

				.line {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0;
				}

				.ico {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}

				.left {
					font-size: 24rpx;
					font-weight: 600;
					color: #333333;
					line-height: 34rpx;
					display: flex;

					.bq {
						color: #C1C1C1;
						margin-right: 30rpx;
						text-align-last: justify;
						width: 100rpx;
						white-space: nowrap;
					}
				}

				.right {
					font-size: 24rpx;
					font-weight: 600;
					color: #C1C1C1;
					display: flex;
					align-items: center;
				}
			}

			.describe {
				padding: 28rpx 32rpx;
				background: #FFF;
				// margin-top: 18rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 40rpx;
				}

				&-content {
					margin-top: 32rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #999999;
					// line-height: 34rpx;

				}
			}

			.notice {
				background: #FFF;
				padding: 22rpx 28rpx;
				// margin-top: 18rpx;
				margin: 30rpx;
				border-radius: 8rpx;

				.notice_title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 40rpx;
				}

				.des {
					margin-top: 32rpx;
					font-size: 24rpx;
					// font-weight: 600;
					color: #999999;
					// line-height: 34rpx;
				}
			}

			.support {
				font-size: 24rpx;
				font-weight: 400;
				color: #808080;
				line-height: 36rpx;
				text-align: center;
				padding: 44rpx 0 200rpx 0;
			}

			.btoomm {
				margin: 20rpx auto 30rpx;
				padding-top: 30rpx;
				min-height: 300rpx;
				background: #FFFFFF;

				.jszc {
					display: flex;
					align-items: flex-end;
					justify-content: center;
					color: #C0C0C0;
					font-size: 32rpx;

					image {
						height: 80rpx;
						width: 80rpx;
						margin-right: 10rpx;
					}
				}

				.bah {
					color: #C0C0C0;
					font-size: 26rpx;
					text-align: center;
					margin-top: 20rpx
				}
			}
		}

		.buy {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 24rpx 28rpx 46rpx;
			box-sizing: border-box;
			background: #FFF;
			box-shadow: 0px 4rpx 4rpx 4rpx rgba(219, 219, 219, 0.5);
			z-index: 100;

			::v-deep button {
				width: 300rpx;
				height: 76rpx;
				// border-radius: 8rpx;
				margin: 0;
				display: flex;
				justify-content: center;
				flex-direction: column;
				border-color: #979797;
				// background: #000;

				&.error {
					background: #B2B2B2;
				}

				text {
					font-size: 30rpx;
					font-weight: 600;
					color: #16172F;
					line-height: 42rpx;

					&:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #4E422C;
						line-height: 34rpx;
					}
				}
				.pay {
					width: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 30rpx;
					font-weight: 600;
					color: #16172F;
					line-height: 42rpx;
					text {
						font-size: 30rpx;
						font-weight: 600;
						color: #16172F;
						line-height: 42rpx;
					}
				}
			}

			.price {
				font-size: 24rpx;
				color: #8C93AA;
				line-height: 34rpx;
			
				text.price {
					font-size: 40rpx;
					color: #16172F;
					font-weight: 600;
				}
			}
		}

		@keyframes myRotate {
			0% {
				transform: rotateY(0deg);
			}

			100% {
				transform: rotateY(-360deg);
			}
		}

		.loading {
			width: 100vw;
			height: 100vh;
			background-color: #030303;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9999;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}

		.morelist {
			height: 80vh;
			overflow: auto;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			padding: 26rpx;

			.title {
				font-size: 32rpx;
				margin: 20rpx 0;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}

			.stop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.l {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;

					.no {
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						border: 2rpx solid #DDDDDD;
						margin-right: 10rpx;
					}

					.yes {
						position: relative;
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						background: #F2E0BC;
						border: 2rpx solid #F2E0BC;
						margin-right: 10rpx;
						
					}
				}

				.r {
					display: flex;
					justify-content: space-between;
					min-width: 338rpx;
					height: 60rpx;
					background: #F7F7FA;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 34rpx;
					color: #C1C1C1;
					text-align: center;
					line-height: 60rpx;

					view {
						width: 164rpx;
					}

					.act {
						width: 164rpx;
						color: #333333;
						height: 60rpx;
						background: #DDDDDD;
						border-radius: 8rpx;
					}
				}
			}

			.draw-lots-list {
				height: 68vh;

			}

			.more {
				font-size: 24rpx;
				font-weight: 600;
				color: #C1C1C1;
				text-align: center;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F5F5F5;

				.left {
					.tt1 {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin-right: 10rpx;
					}

					.zs {
						min-width: 54rpx;
						height: 28rpx;
						background: #000000;
						border-radius: 4rpx;
						font-size: 20rpx;
						text-align: center;
						font-weight: 600;
						padding: 0 10rpx;
						color: #FFFFFF;
						line-height: 28rpx;
					}

					.nzs {
						min-width: 54rpx;
						height: 28rpx;
						padding: 0 10rpx;
						background: #B6B6B6;
						border-radius: 4px;
						text-align: center;
						font-size: 20rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 28rpx;
					}

					.tt2 {
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 34rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					position: relative;
					padding-right: 36rpx;

					.tt1 {
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;
						line-height: 28rpx;
						text-align: right;
					}

					.tt2 {
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 34rpx;
						margin-top: 10rpx;
						text-align: right;
					}

					.lr {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 24rpx;
						width: 14rpx;
					}
				}
			}
		}
	}
</style>
